<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="/js/vue.min.js"></script>
    <script language="JavaScript" src="/js/axios.min.js"></script>
</head>
<body>
<div id="OrderDiv">
    <table border="1">
        <tr>
            <td>
            <select name="userid" v-model="userid">
                <option value="0">用户</option>
                <option v-for="user in userList" :value="user.userid">{{user.username}}</option>
            </select>
            </td>
            <td>
            <select name="bid" v-model="bid" >
                <option value="0">图书</option>
                <option v-for="book in bookList" :value="book.bid">{{book.bookname}}</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>地址<input type="text" name="address" v-model="address"></td>
            <td>手机号<input type="text"name="phone" v-model="phone"></td>
        </tr>
        <tr>
            <td>
                <button @click="addorder">添加订单</button>
            </td>
        </tr>

    </table>
</div>
<script language="JavaScript">
    var vm = new Vue({
        el: "#OrderDiv",
        data: {
            address:"",
            phone:"",
            userid:"",
            bid: "",
            userList:[],
            bookList:[]
        },
        created() {
            this.lochuserList();
            this.lochbookList();
        },
        methods: {
            addorder: function () {
                var path = "http://localhost:8070/order/addorder"
                let formData = new FormData();
                formData.append("address",vm.address);
                formData.append("phone",vm.phone);
                formData.append("userid",vm.userid);
                formData.append("bid",vm.bid);
                axios.post(path,formData).then(function (obj) {

                    if (obj.status == 200) {
                        var pathResult = obj.data;
                        location.href="index.html";
                        return;
                    }
                }).catch(function (error) {
                    alert("addorder有异常了")
                })
            },

            lochuserList:function () {
                var path = "http://localhost:8070/user/find"
                axios.get(path).then(function (obj) {
                    alert(obj.status)
                    if (obj.status == 200) {
                        var pathResult = obj.data;
                        vm.userList = pathResult.obj;
                        alert("lochuserList查询列表:" + vm.userList)
                        return;
                    }
                }).catch(function (error) {
                    alert("lochuserList有异常了")
                })
            },
            lochbookList: function () {
                var path = "http://localhost:8070/book/find"
                axios.get(path).then(function (obj) {
                    alert(obj.status)
                    if (obj.status == 200) {
                        var pathResult = obj.data;
                        vm.bookList = pathResult.obj;
                        alert("lochbookList查询列表:" + vm.bookList)
                        return;
                    }
                }).catch(function (error) {
                    alert("lochbookList有异常了")
                })
            }

        }
    });
</script>
</body>
</html>